<script setup>

import {Lock, UserFilled} from "@element-plus/icons-vue";
import {reactive} from "vue";
import xx from "@/axios/xx";
import {ElMessage} from "element-plus";
import router from "@/router";

const info = reactive({
  form:{}
})

//注册
const register = () => {
  if (info.form.password !== info.form.passwordNew){
    ElMessage.error("两次输入密码不一致!请重新输入")
  }else{
    xx.post("/userInfo/register",info.form).then(res =>{
      if(res.code === 200){
        ElMessage({
          message: res.message,
          type: 'success',
        })
        router.push("/login")
      }else {
        ElMessage.error(res.message)
      }
    })
  }


}
</script>

<template>
  <div class="main">
    <br><br><br>
    <div class="lg">
      <div class="title">欢迎注册中小型金融贷款管理平台</div>
      <div class="ipt">
        <br><br>
        <div class="ipt-1">
          <el-form :model="info.form" label-width="auto" style="max-width: 400px">
            <el-form-item >
              <el-input style="height: 40px" v-model="info.form.username" placeholder="用户名"  :prefix-icon="UserFilled" />
            </el-form-item>
            <el-form-item >
              <el-input style="height: 40px" v-model="info.form.password" type="password" placeholder="密码" :prefix-icon="Lock"/>
            </el-form-item>
            <el-form-item >
              <el-input style="height: 40px" v-model="info.form.passwordNew" type="password" placeholder="确认密码" :prefix-icon="Lock"/>
            </el-form-item>
            <div>
              <el-checkbox v-model="checked3" label="同意《服务条款》和《隐私政策》" />
            </div>
            <br>
            <el-form-item >
              <el-button color="#3b78dd" @click="register" style="width: 100%;;height: 40px">立即注册</el-button>

            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.main{
  /*background-color: rgba(11, 42, 99, 0.71);*/
  width: 100%;
  height: 100vh;

  background-size: 100%;
}
.lg{
  width: 650px;
  height: 400px;
  margin-left: 400px;
  margin-top: 70px;
}
.title{
  height: 80px;
  font-size: 30px;
  font-weight: bold;
  background-color: aliceblue;
  text-align: center;
  line-height: 80px;
}
.ipt{
  height: 340px;
  background-color: aliceblue;
  border-radius: 10px;
}
.ipt-1{
  width: 400px;
  margin: 0 auto;
}
</style>